<template>
  <div class="login">
    <!-- <div class="title">基于python的新冠疫情数据统计分析系统</div> -->
    <div class="content">
      <div class="title">基于python的新冠疫情数据统计分析系统</div>
      <div class="input_item">
        <label>账号:</label><input v-model="username" type="text" />
      </div>
      <div class="input_item">
        <label>密码:</label><input v-model="password" type="password" />
      </div>
      <div class="btn_block">
        <button class="login_btn btn" @click="goLogin">登录</button>
        &nbsp;
        <button @click="goRegister" class="reg_btn btn">注册</button>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, onBeforeMount, ref } from "vue";
import { login, register } from "@/api";
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: "Login",
  setup() {
    const username = ref("");
    const password = ref("");

    onBeforeMount(() => {});
    function goLogin() {
      let obj = { username: username.value, password: password.value };
      console.log("goLogin");
      // return
      login(obj).then((res) => {
        console.log(res, "====");
        if (res.data && res.status == "200" && res.data.code==200) {
          this.$router.push("/globalPandemic");
        } else {
          ElMessage.error(res.data.data)
        }
      });
    }
    function goRegister() {
      register({ username: username.value, password: password.value }).then(
        (res) => {

        if (res.data && res.status == "200" && res.data.code==200) {
            ElMessage.success('注册成功')
        } else {
          ElMessage.error(res.data.data)
        }
        }
      );
    }
    return {
      username,
      password,
      goLogin,
      goRegister,
    };
  },
});
</script>
<style scoped lang='scss'>
.login {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/img/background.jpg");
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .content {
    .input_item {
      height: 60px;
      label {
        padding-right: 10px;
        font-size: 18px;
      }
      input {
        height: 30px;
        width: 250px;
        outline: none;
        border: none;
      }
    }
    .btn_block {
      .btn {
        height: 35px;
        width: 151px;
        background: #02a1c1;
        color: #fff;
        border: none;
        cursor: pointer;
      }
      .login_btn {
      }
      .reg_btn {
      }
    }
  }
}
.title {
  line-height: 60px;
}
</style>